<template>
	<view class="content">
		<view class="nav">
			<view v-for="(item, index) in category" @click="SwitchVariety(item, index)" :key="index"
				:class="{ active: activeIndex === index }" style="cursor: pointer">{{ item }}</view>
		</view>
		<view class="cont">
			<view class="item" v-for="(item, index) in Domestic_list" :key="index">
				<view class="left" @click="
            handleTabs('/pages/consult/details?id=' + item.News_SerialNumber)
          ">
					<view class="text-success font-weight-bold">{{
            item.News_Name
          }}</view>
					<view class="foot">
						<view>
							<view v-if="item.News_Type == 0">通知公告</view>
							<view v-else-if="item.News_Type == 1">行情描述</view>
							<view v-else-if="item.News_Type == 2">国内资讯</view>
							<view v-else-if="item.News_Type == 3">国际资讯</view>
							<view v-else-if="item.News_Type == 4">公司动态</view>
						</view>
						<view class="dian mx-1"></view>
						<view>{{ item.News_Date.substring(0, 10) }}</view>
					</view>
				</view>
				<view class="right"></view>
			</view>
			<view class="text-center font-sm">{{loadingText}}</view>
		</view>
		<view v-if="tag" @click="goTop" class="bg-white flex  align-center"
			style="width: 120rpx;height: 120rpx;border-radius: 50%;box-shadow: 0 0 15rpx rgba(0,0,0,.5);position: fixed;right: 80rpx;bottom: 80rpx;justify-content: center;">
			<image style="height: 80%;width: 80%;" src="https://digital.essc.top/dist/zjl_icon/gotop.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		NewsAll
	} from "@/api/information.js";
	export default {
		data() {
			return {
				Domestic_list: [],
				International_list: [],
				activeIndex: 0,
				Domain_Business: app.globalData.Domain_Business,
				ThemeColors: app.globalData.ThemeColors,
				form: {
					News_Type: "1", //type 默认空是全部
					Row_Status: "", //状态
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				tableData: [],
				total: 0,
				category: [
					//用户专区分类筛选
					"通知公告",
					"国内咨询",
					"国外咨询",
					"公司动态",
				],
				scrollTop: 0,
				timer: null,
				loadingText: '向下拉取加载更多',
				tag: false,
			};
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		watch: {
			scrollTop: function(newValue, oldValue) {
				if (newValue > 800) {
					this.tag = true
				} else {
					this.tag = false
				}
			},
		},
		onReachBottom() {
			if (this.loadingText != '没有更多了') {
				this.form.page++
				this.throttling(this.form.News_Type);
			}
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0
				})
			},
			throttling(i,delay = 500) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.Domestic(i)
				}, delay)
			},
			async SwitchVariety(item, i) {
				this.Domestic_list = []
				this.form.page = 1
				this.goTop()
				if (item === "通知公告") {
					this.throttling(0)
				} else if (item === "国内咨询") {
					this.throttling(2)
				} else if (item === "国外咨询") {
					this.throttling(3)
				} else if (item === "公司动态") {
					this.throttling(4)
				}
				this.activeIndex = i;
			},
			async Domestic(i) {
				this.form.News_Type = i;
				uni.showLoading({
					title: '加载中...'
				})
				this.loadingText = '加载中...'
				const res = await NewsAll({
					data: this.form,
				});
				uni.hideLoading()
				this.Domestic_list.push(...res.tableData);
				this.total = Number(res.limit)
				if (this.total == this.Domestic_list.length) {
					this.loadingText = '没有更多了'
				} else {
					this.loadingText = '下拉加载更多'
				}
			},
		},
		onLoad() {
			this.SwitchVariety("通知公告", 0);
		},
	};
</script>

<style lang="scss">
	.content {
		width: 100%;
		background-color: #f5f5f5;

		.nav {
			height: 88rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;

			// font-weight: bold;
			// font-size: 1;
			view {
				text-align: center;
				height: 100%;
				display: flex;
				align-items: center;
			}

			.active {
				border-bottom: 2px solid #28a745;
				color: #28a745;
			}
		}

		.cont {
			// height: calc(100vh - 44px);
			padding: 20rpx 0 0 0;
			box-sizing: border-box;

			.item {
				width: 100%;
				background-color: #fff;
				height: 200rpx;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;

				.left {
					width: 75%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.foot {
						display: flex;
						justify-content: flex-start;
						font-size: 24rpx;
						color: #828d96;
						align-items: center;

						.dian {
							width: 0px;
							height: 0px;
							border-radius: 50%;
							border: 4px solid #28a745;
							margin-top: 4rpx;
						}
					}
				}

				.right {
					// border: 1px solid #28a745;
					width: 160rpx;
					height: 160rpx;
				}
			}
		}
	}
</style>